import { getPlantByPage, addPlant, updatePlant, delPlant } from '@/services/baseData/plant';
import { PlusOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Form, Input, message, Modal, Tree } from 'antd';
import { sortTran, filterTran, filterTranNew } from '@/utils/requestUtil';
import React, { useEffect, useRef, useState } from 'react';
import type { FormLayout } from 'antd/es/form/Form';
import {
  ModalForm,
  ProFormText,
  ProFormSelect,
  ProFormCascader,
  ProFormTreeSelect,
} from '@ant-design/pro-components';
const LAYOUT_TYPE_HORIZONTAL = 'horizontal';
const Plant: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  const [modalVisit, setModalVisit] = useState(false); // 新建和编辑提示框
  const [confirmLoading, setConfirmLoading] = useState(false); //编辑框的disable
  const [formTitle, setFormTitle] = useState('新建'); //
  const [createOrUpdate, setCreateOrUpdate] = useState(false); //编辑框的disable
  const [form] = Form.useForm();
  const [grid, setGrid] = useState(true);
  const [formLayoutType, setFormLayoutType] = useState<FormLayout>(LAYOUT_TYPE_HORIZONTAL);
  const columns: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 80,
      align: 'center',
      sorter: true,
    },
    {
      title: '工厂编号',
      dataIndex: 'plantCode',

      align: 'center',
      sorter: true,
    },
    {
      title: '工厂描述',
      dataIndex: 'plantDesc',

      align: 'center',
      sorter: true,
    },
    {
      title: '工厂名称',
      dataIndex: 'plantName',

      align: 'center',
      sorter: true,
    },
    {
      title: '创建日期', //表头显示的名称
      search: false,
      dataIndex: 'createTime',

      align: 'center',
      sorter: true,
    },
    {
      title: '创建人', //表头显示的名称
      search: false,
      dataIndex: 'createName',
      align: 'center',
      sorter: true,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      align: 'center',
      render: (text, record, _, action) => [
        <a
          key="editKey"
          onClick={() => {
            setModalVisit(true);
            setCreateOrUpdate(true);
            setFormTitle('编辑');
            form.setFieldsValue({
              plantCode: record.plantCode,
              plantDesc: record.plantDesc,
              plantName: record.plantName,
              id: record.id,
            });
          }}
        >
          编辑
        </a>,
        <a
          key="deleteKey"
          onClick={() => {
            Modal.confirm({
              title: '删除',
              content: '确定要删除吗',
              okText: '确认',
              cancelText: '取消',
              onOk: async () => {
                await delPlant({ id: record.id });
                actionRef.current.reload();
              },
            });
          }}
        >
          删除
        </a>,
      ],
    },
  ];
  const handleSubmit = async () => {
    setConfirmLoading(true);
    if (formTitle == '新建') {
      const result = await addPlant(form.getFieldsValue());
      if (result != null) {
        message.success('添加成功');
      }
    } else {
      await updatePlant(form.getFieldsValue());
    }
    setConfirmLoading(false);
    setModalVisit(false);
    actionRef.current.reload();
  };

  return (
    <PageHeaderWrapper title={false} breadcrumb={undefined}>
      <ProTable
        headerTitle="工厂查询"
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        revalidateOnFocus={false}
        toolBarRender={(action, { selectedRows }) => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            onClick={() => {
              setCreateOrUpdate(false);
              setFormTitle('新建');
              form.resetFields();
              setModalVisit(true);
            }}
            type="primary"
          >
            新建
          </Button>,
        ]}
        request={async (params = {}, sort, filter) => {
          const sorters = sortTran(sort);
          const filters = filterTranNew(params);
          const result = await getPlantByPage({ ...params, sorters: sorters, filters: filters });
          return {
            data: result.data.content,
            total: result.data.totalElements,
            success: result.success,
          };
        }}
        columns={columns}
        rowSelection={{}}
      />
      <ModalForm
        title={formTitle}
        visible={modalVisit}
        form={form}
        onFinish={handleSubmit}
        modalProps={{
          onCancel: () => {
            setModalVisit(false);
          },
        }}
        layout={formLayoutType}
        grid={grid}
        rowProps={{
          gutter: [16, formLayoutType === 'inline' ? 16 : 0],
        }}
        // confirmLoading={confirmLoading}
        // onCancel={() => setModalVisit(false)}
      >
        <ProFormText name="id" label="id" placeholder="请输入名称" hidden={true} />

        <ProFormText
          name="plantCode"
          label="工厂编号"
          colProps={{ md: 12, xl: 12 }}
          rules={[{ required: true, message: 'Please input your plantCode!' }]}
        />

        <ProFormText name="plantDesc" label="工厂描述" colProps={{ md: 12, xl: 12 }} />

        <ProFormText name="plantName" label="工厂名称" colProps={{ md: 12, xl: 12 }} />
      </ModalForm>
    </PageHeaderWrapper>
  );
};
export default Plant;
